<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">编辑资料</block>
		</cu-custom>
		<form>
			<view class="cu-form-group">
				<view class="title">姓名</view>
				<input placeholder="请输入姓名" name="input" v-model="myFormData.realname"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">用户名</view>
				<input placeholder="用户名" name="input" v-model="myFormData.username" disabled></input>
			</view>
			<view class="cu-form-group">
				<view class="title">头像</view>
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
					 <image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red radius" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
			
			<view class="cu-form-group margin-top">
				<view class="title">性别</view>
				<switch class='switch-sex' @change="SwitchC" :class="switchC?'checked':''" :checked="switchC?true:false"></switch>
			</view>
		
			<view class="cu-form-group margin-top">
				<view class="title">手机号码</view>
				<input placeholder="输入手机号码" name="input" v-model="myFormData.phone"></input>
				<view class="cu-capsule radius">
					<view class='cu-tag bg-blue '>
						+86
					</view>
					<view class="cu-tag line-blue">
						中国大陆
					</view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">邮箱</view>
				<input placeholder="输入邮箱" name="input"  v-model="myFormData.email"></input>
			</view>
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-blue lg"  @click="onSubmit">提交</button>
			</view>
		</form>
		<view class="padding-left">
			<u-radio-group v-model="protocol">
				<u-radio shape="circle" label="同意" labelSize="12" name="agree"></u-radio>
				<u--text decoration="underline" text="用户服务及隐私协议" size="13" @click="clickProtocol" type="primary"></u--text>
			</u-radio-group>
		</view>
		
		<u-popup :show="showProtocol" :closeOnClickOverlay="true" @close="showProtocol = false;">
			<view class="padding">
				<u--text text="用户服务及隐私协议" color="#333333" :bold="true" size="16" align="center"></u--text>
				<u-gap height="10" bgColor="#fff"></u-gap>
				<u--text size="14" lineHeight="30" text="我们致力于保护您在使用我们小程序时所提供的私隐、私人资料以及个人的资料(统称“个人资料”)，使我们在收集、使用、储存和传送个人资料方面符合(与个人资料私隐有关的法律法规)及消费者保护方面的最高标准。 为确保您对我们在处理个人资料上有充分信心，您切要详细阅读及理解隐私政策的条文。"></u--text>
				<u-gap height="8" bgColor="#fff"></u-gap>
				<u--text size="14" lineHeight="30" text="收集个人资料的目的及用途如下:通过我们的小程序向您提供我们的各项服务;当您使用我们的小程序时，能辨认以及确认您的身份;您上报的油烟及隔油池信息将绑定到您填写的商户名下,以便后续与我们结算各项事宜。"></u--text>
				<u-gap height="8" bgColor="#fff"></u-gap>
				<u--text size="14" lineHeight="30" text="感谢您的阅读,我们将竭诚为您服务。"></u--text>
				<u-gap height="15" bgColor="#fff"></u-gap>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import api from '@/api/api.js'
	export default {
		data() {
			return {
				index: -1,
				switchC: true,
				protocol: "agree",
				showProtocol: false,
				imgList: [],
				uploadUrl:"/sys/common/upload",
				userUrl:'/sys/user/queryById',
				myFormData:{
					avatar:'',
					realname:'',
					username:'',
					sex:1,
					birthday:'',
					orgCode:'',
					workNo:'',
					phone:'',
					email:'',
					id:'',
				},
			};
		},
		mounted() {
			this.loadinfo()
		},
		methods: {
			loadinfo(){
				this.$http.get(this.userUrl,{params:{id:this.$store.getters.userid}}).then(res=> {
					if (res.data.success) {
						let result = res.data.result
						if(result.avatar&&result.avatar.length >0)
						this.myFormData.avatar = api.getFileAccessHttpUrl(result.avatar)
						this.myFormData.realname = result.realname
						this.myFormData.username= result.username
						this.myFormData.post = result.post
						this.myFormData.sex = result.sex===1?'男':'女'
						this.myFormData.birthday = result.birthday== null?'无':result.birthday
						this.myFormData.departIds= result.departIds
						this.myFormData.workNo= result.workNo
						this.myFormData.phone= result.phone
						this.myFormData.telephone= result.telephone== null?'无':result.telephone
						this.myFormData.email= result.email
						this.myFormData.userIdentity= result.userIdentity=== 1?'普通成员':'上级'
						this.myFormData.status= result.status === 1?'正常':'冻结'
						this.myFormData.orgCode= result.orgCode
					}
				}).catch(e=>{
					console.log("请求错误",e)
				})
			},
			onSubmit() {
			  let myForm = this.myFormData
			  let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
			  let checkEmail = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
			  console.log("myForm",myForm)
			  if(!myForm.phone || myForm.phone.length==0){
				this.$tip.alert('请输入手机号');
				return false
			  }
			  if(!checkPhone.test(myForm.phone)){
				this.$tip.alert('请输入正确的手机号');
				return false
			  }
			  if(!checkEmail.test(myForm.email)){
				this.$tip.alert('请输入正确的邮箱地址');
				return false
			  }
				this.myFormData.id = this.$store.getters.userid
				if(this.switchC){
					this.myFormData.sex=1
				}else{
					this.myFormData.sex=2
				}
				console.log('myform',this.myFormData)
				this.$tip.loading();
				this.$http.put('/sys/user/appEdit',this.myFormData).then(res=>{
					console.log(res)
					this.$tip.loaded();
					if (res.data.success){
						this.$tip.toast('提交成功')
						uni.setStorageSync('userEdit', 'userEdit')//添加操作标记，返回时需要刷新
						uni.navigateBack()
					}
				}).catch(()=>{
					this.$tip.loaded();
					this.$tip.error('提交失败')
				});
			},
			DateChange(e) {
				this.myFormData.birthday = e.detail.value
			},
			SwitchC(e) {
				this.switchC = e.detail.value
			},
			ChooseImage() {
				var that=this;
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						that.$http.upload(that.$config.apiUrl+that.uploadUrl, {
								filePath: res.tempFilePaths[0],
								name: 'file'
							})
							.then(res => {
								that.myFormData.avatar=res.data.message;
							})
							.catch(err => {
								that.$tip.error(err.data.message)
							});
						this.imgList = res.tempFilePaths
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '召唤师',
					content: '确定要删除这段回忆吗？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			clickProtocol(){
				this.showProtocol = !this.showProtocol
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>
